<template>
    <view class="globe_back">
        <view class="box">
            <u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="Cancel"></u-picker>
            <view class="back_fff br_24 p_24 f_28">
                <view class="flex">
                    <view class="title">商品名称</view>
                    <view class="line_F7FAFF pb_16" style="width: 75%">
                        <input type="text" placeholder="请填写商品名称" />
                    </view>
                </view>
                <view class="flex mt_24" v-if="addtype == 0">
                    <view class="title">商品类型</view>
                    <view class="flex justify_content_between line_F7FAFF pb_16" @click="show = true" style="width: 75%">
                        <input type="text" placeholder="请选择商品类型" v-model="formData.type" />
                        <image class="img_32" :src="url + 'next-icon.png'" mode=""></image>
                    </view>
                </view>
            </view>
            <!-- 商品图片 -->
            <view>
                <view class="back_fff br_16 p_32 m_16 mt_32">
                    <view class="flex">
                        <view class="from-title-box title">
                            <text class="f_28 cl_333A47">商品图片</text>
                        </view>
                        <view class="imm_imgbox">
                            <view style="display: inline-block" @click="handleUpload('logo')">
                                <image class="img_140" :src="$lz.cdn(formData.logo, 3, 'imgs/updata-img.png', 1)" mode="widthFix"></image>
                            </view>
                            <view class="f_20 cl_999CA3">建议上传尺寸为1:1的图片</view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 商品规格 -->
            <view class="back_fff br_24 mt_24 f_28">
                <view class="flex topitem">
                    <view class="flex_1">商品规格</view>
                    <view @click="addGood" class="cl_3377FF">+ 添加一级规格</view>
                </view>
                <view class="item" v-for="(item, index) in list" :key="index">
                    <view class="flex justify_content_between ClassA">
                        <view>{{ item.title }}</view>
                        <view class="flex">
                            <image class="iconImg" src="@/static/imgs/icon_tj.png" mode="" @click="addChild(item)"></image>
                            <image class="iconImg" src="@/static/imgs/icon_bj.png" mode="" @click="editor(item)"></image>
                            <image class="iconImg" src="@/static/imgs/icon_sc.png" mode="" @click="deleteBtn(index)"></image>
                            <u-icon v-if="item.arrow" name="arrow-up" color="#fff" size="20" @click="setArrow(index, false)"></u-icon>
                            <u-icon v-else name="arrow-down" color="#fff" size="20" @click="setArrow(index, true)"></u-icon>
                        </view>
                    </view>
                    <view v-if="item.children.length > 0 && item.arrow">
                        <view class="child" v-for="(k, i) in item.children" :key="k.time">
                            <view class="flex justify_content_between ClassB">
                                <view class="flex_1">{{ k.cname }}</view>
                                <view class="flex">
                                    <image class="iconImg" src="@/static/imgs/icon_bj.png" mode="" @click="editorChild(k,i,index)"></image>
                                    <image class="iconImg" src="@/static/imgs/icon_sc.png" mode="" @click="twoDeleteBtn(index, i)"></image>
                                    <u-icon v-if="k.arrow" name="arrow-up" color="#fff" size="20" @click="setArrow2(index, i, false)"></u-icon>
                                    <u-icon v-else name="arrow-down" color="#fff" size="20" @click="setArrow2(index, i, true)"></u-icon>
                                </view>
                            </view>
                            <view class="f_28 back_F7FAFF p_24" v-if="k.arrow">
                                <view class="flex info">
                                    <view class="title">商品价格</view>
                                    <view>{{ k.price }}</view>
                                </view>
                                <view class="flex info">
                                    <view class="title">商品库存</view>
                                    <view>{{ k.count }}</view>
                                </view>
                                <view class="flex info">
                                    <view>
                                        <view class="title">规格图片</view>
                                        <image class="guigImg" v-for="j in k.url" :src="j.file[0].url" mode="widthFix"></image>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="addMask mask" v-if="guigeShow">
                <view class="cont p_center br_24">
                    <view class="nameTitle fw_bold f_32 mt_8 pt_24 pb_24">添加一级规格</view>
                    <view class="newName mt_32">
                        <text class="f_28 cl_666B75">规格名称</text>
                        <input class="name f_28 back_F7F7F7 br_8" placeholder="请填写一级规格名称" border="surround" clearable v-model="value" />
                    </view>
                    <view class="flex justify_content_between">
                        <view class="nameBtn back_F7F7F7 cl_333A47 f_32 br_8 mr_24" @click="guigeShow = false">取消</view>
                        <view class="nameBtn back_3377FF cl_fff f_32 br_8" @click="guigconfirm">确定</view>
                    </view>
                </view>
            </view>
            <view class="mask2 mask" v-if="isSecond">
                <view class="content p_center br_24">
                    <view class="nameTitle fw_bold f_32 mt_8 pt_24 pb_24">添加二级规格</view>
                    <view class="flex aCenter mb-20">
                        <view class="title f_28 cl_666B75">规格名称</view>
                        <u--input v-model="name" placeholder="请填写二级规格名称" clearable></u--input>
                    </view>

                    <view class="flex aCenter mb-20">
                        <view class="title f_28 cl_666B75">销售价格</view>
                        <u--input v-model="price" placeholder="请填写销售价格" clearable></u--input>
                        元
                    </view>
                    <view class="flex aCenter mb-20">
                        <view class="title f_28 cl_666B75">商品库存</view>

                        <u--input v-model="total" placeholder="请填写商品库存" clearable></u--input>
                    </view>
                    <view class="mt_32">
                        <view class="flex">
                            <view class="from-title-box title" style="width: 25%">
                                <text class="f_28 cl_333A47">商品图片</text>
                            </view>
                            <view class="imm_imgbox tips_img">
                                <view style="display: inline-block" >
                                    <u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple :maxCount="10" :previewFullImage="true"></u-upload>
                                </view>
                                <view class="f_20 cl_999CA3">建议上传尺寸为1:1的图片</view>
                            </view>
                        </view>
                    </view>
                    <view class="flex justify_content_between">
                        <view class="nameBtn back_F7F7F7 cl_333A47 f_32 br_8 mr_24" shape="default" @click="isSecond = false">取消</view>
                        <view class="nameBtn back_3377FF cl_fff f_32 br_8" shape="success" @click="secondChide">确定</view>
                    </view>
                </view>
            </view>
            <!-- 销售价格 -->
            <u-picker :show="selaShow" :columns="sela" @confirm="selaconfirm"></u-picker>
            <view class="back_fff br_24 p_24 f_28 mt_24">
                <view class="flex mt_24">
                    <view class="title">销售价格</view>
                    <view class="flex justify_content_between line_F7FAFF pb_16" style="width: 75%">
                        <input type="text" placeholder="请填写销售价格" />
                        <text>元</text>
                    </view>
                </view>
                <view class="flex mt_24">
                    <view class="title">商品库存</view>
                    <view class="line_F7FAFF pb_16" style="width: 75%">
                        <input type="text" placeholder="请填写商品库存" />
                    </view>
                </view>
                <view class="flex mt_24">
                    <view class="title">商品状态</view>
                    <view class="flex justify_content_between line_F7FAFF pb_16" @click="selaShow = true" style="width: 75%">
                        <input type="text" placeholder="请选择商品状态" v-model="formData.selatype" />
                        <image class="img_32" :src="url + 'next-icon.png'" mode=""></image>
                    </view>
                </view>
            </view>
            <!-- 七天无理由 -->
            <view class="detailedBox back_fff br_24 p_24 f_28 mt_24" v-if="addtype == 0">
                <u-checkbox-group v-model="checkboxValue1" placement="column" shape="circle" iconPlacement="right" @change="checkboxChange">
                    <u-checkbox v-for="(item, index) in checkboxList1" :key="index" :label="item.name" :name="item.name"></u-checkbox>
                </u-checkbox-group>
            </view>
            <!-- 商品详情 -->
            <view>
                <view class="back_fff br_16 p_32 m_16 mt_32">
                    <view class="flex">
                        <view class="from-title-box title">
                            <text class="f_28 cl_333A47">商品详情</text>
                        </view>
                        <view class="imm_imgbox">
                            <view style="display: inline-block" @click="handleUpload('logo')">
                                <image class="img_140" :src="$lz.cdn(formData.logo, 3, 'imgs/updata-img.png', 1)" mode="widthFix"></image>
                            </view>
                            <view class="f_20 cl_999CA3">建议上传3M内的图片</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="addBtn back_3377FF br_24 cl_fff mt_24">保存</view>
        <view style="height: 20px"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            ourl: '',
            addtype: '',
            show: false,
            classShow: false,
            classTowShow: false,
            selaShow: false,
            columns: [['商品类型', '商品类型1', '商品类型2']],
            sela: [['上架', '下架']],
            checkboxValue1: [],
            // 基本案列数据
            checkboxList1: [
                {
                    name: '七天无理由',
                    disabled: false
                }
            ],
            formData: {
                type: '',
                classA: '',
                selatype: ''
            },
            value: '测试',
            guigeShow: false,
            isSecond: false,
            isEdetor: false,
            name: '测试规格',
            price: '50',
            total: '10',
            imgDate: null,
            fileList3: [],
            list: [],
            imgList: [],
            itemId: '',
			isEditor:false, //false:为新增二级规格 ， true:修改二级规格
			parentIndex:0,
			childrenIndex:0
        };
    },
    onShow() {
        this.ourl = this.baseUrl + this.imgPath;
    },
    onLoad(e) {
        this.addtype = e.type;
    },
    methods: {
		// 修改二级规格 item：点击修改的对象， index ：二级规格当前的索引 ， parentIndex：父级索引
		editorChild(item,index,parentIndex){
			let arr = []
			this.isSecond = true //显示弹窗
			this.isEditor = true // 设定为修改弹窗模式
			this.parentIndex = parentIndex // 设定为修改弹窗模式
			this.childrenIndex = index // 设定为修改弹窗模式
			this.name = item.cname
			this.price = item.price
			this.total = item.count
			item.url && item.url.forEach(i=>{
				i.file.forEach(j=>{
					arr.push({url:j.url})
				})
			})
			this.imgList = item.url
			this.fileList3 = arr
		},
        confirm(e) {
            this.formData.type = e.value[0];
            this.show = false;
        },
        Cancel() {
            this.show = false;
        },
        selaconfirm(e) {
            this.formData.selatype = e.value[0];
            this.selaShow = false;
        },
        // 商品图片
        handleUpload(field) {
			console.log('field',field)
            let that = this;
           /* uni.chooseImage({
                count: 1,
                sourceType: ['album', 'camera'],
                sizeType: ['original', 'compressed'],
                success: (chooseImageRes) => {
                    console.log('chooseImageRes', chooseImageRes);
                    const path = chooseImageRes.tempFilePaths[0];
                    // upload(path, 'image').then(({ data }) => {
                    //     const { hash } = data.data;
                    //     that.formData[field] = hash;
                    // });
                }
            }); */
        },
        changeName(e) {
            this.formData.classA = e.detail.value;
        },
        addGood() {
            this.guigeShow = true;
        },
        //折叠
        setArrow(index, status) {
            console.log(status);
            this.list[index].arrow = status;
        },
        //折叠
        setArrow2(index, i, status) {
            console.log(status);
            this.list[index].children[i].arrow = status;
        },
        //添加一级规格
        guigconfirm() {
            // 添加数据
            let time = new Date().getTime();
            //isEdetor为true时是修改数据 反之则添加数据
            if (this.isEdetor) {
                for (let i = 0; i < this.list.length; i++) {
                    if (this.list[i].time == this.itemId) {
                        this.list[i].title = this.value;
                        break;
                    }
                }
                // 清空输入框
                this.value = '';
                // 清空时间戳
                this.itemId = '';
            } else {
                this.list.push({
                    title: this.value,
                    time: time,
                    arrow: true,
                    children: []
                });
                // 清空输入框
                this.value = '';
            }
            // 隐藏弹窗
            this.guigeShow = false;
        },
        // 添加二级规格
        addChild(obj) {
            this.itemId = obj.time;
            this.isSecond = true;
        },
        afterRead(e) {
			console.log('e==<',e)
            this.imgList.push(e);
            this.fileList3.push({
                url: e.file[0].url
            });
        },
        deletePic(e) {
            console.log(e);
        },
        // 添加二级规格
        secondChide() {
			// 判断是新增 或者修改
			if(this.isEditor){
				this.list[this.parentIndex].children[this.childrenIndex].cname = this.name
				this.list[this.parentIndex].children[this.childrenIndex].price = this.price
				this.list[this.parentIndex].children[this.childrenIndex].count = this.total
				this.list[this.parentIndex].children[this.childrenIndex].url = this.imgList
				
			}else{
				let time2 = new Date().getTime();
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].time == this.itemId) {
						this.list[i].children.push({
							cname: this.name,
							price: this.price,
							count: this.total,
							arrow: true,
							time: time2,
							url: this.imgList
						});
						break;
					}
				}
			}
			// 清空缓存数据
			this.name = '';
			this.price = '';
			this.total = '';
			this.imgList = [];
			this.fileList3 = [];
            // 隐藏弹窗
            this.isSecond = false;
			// 重置弹窗模式
			this.isEditor = false
        },
        // 编辑数据
        editor(obj) {
            this.guigeShow = true;
            this.isEdetor = true;
            this.value = obj.title;
            this.itemId = obj.time;
        },

        // 删除一级规格
        deleteBtn(index) {
            this.list.splice(index, 1);
        },
        twoDeleteBtn(index, i) {
            // let list = this.list[index].children
            this.list[index].children.splice(i, 1);
        }
    }
};
</script>

<style scoped lang="scss">
.addBtn {
    width: 686rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    margin: 24px auto;
}
.iconImg {
    width: 36rpx;
    height: 36rpx;
    margin: 0 15rpx;
}
.box {
    padding: 32rpx;
    .title {
        width: 148rpx;
    }
    .ClassA {
        background: #3377ff;
        border-radius: 16rpx 16rpx 0 0;
        color: white;
        padding: 24rpx;
        margin: 0 24rpx;
    }
    .ClassB {
        background: rgba(51, 119, 255, 0.7);
        color: white;
        padding: 24rpx;
    }
    .guigImg {
        width: 120rpx;
        height: 120rpx;
        border-radius: 16rpx;
    }
    .info {
        padding: 8rpx 0;
    }
}
.nameTitle {
    text-align: center;
}

.name {
    width: 574rpx;
    height: 92rpx;
    line-height: 92rpx;
    padding: 0 24rpx;
    margin-top: 10px;
}

.nameBtn {
    width: 298rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    display: inline-block;
    margin-top: 64rpx;
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
}
.p_center {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
.mask2 {
    .content {
        background: #fff;
        width: 620rpx;
        height: 850rpx;
        padding: 0 20rpx;
        .itemText {
            font-size: 26rpx;
            margin-right: 10rpx;
        }
    }
    .ertitle {
        text-align: center;
        padding: 20rpx;
    }
}
.addMask {
    .cont {
        background: #fff;
        width: 620rpx;
        height: 500rpx;

        padding: 10rpx 40rpx;
    }
    .textCenter {
        text-align: center;
    }
    .topp {
        padding: 20rpx 0;
    }
    .inputitem {
        margin-bottom: 40rpx;
    }
}
.child {
    margin: 0 24rpx;
    &-title {
        background: blueviolet;
        padding: 20rpx;
    }
    .cont {
        padding: 20rpx;
    }
}
.item {
    margin-bottom: 40rpx;
    background: #fff;
    border-radius: 20rpx;
}
.topitem {
    padding: 20rpx;
}
.color-fff {
    color: #fff;
}
.aCenter {
    align-items: center;
}
.top {
    margin-top: 250rpx;
}
.mb-20 {
    margin-bottom: 40rpx;
}
.w120 {
    width: 120rpx;
}
</style>
